<template>
  <div class="personal-data">
    <mt-header title="个人资料" fixed>
      <router-link to slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <!-- <div class="progress">
      <mt-progress :value="50" :bar-height="20"></mt-progress>
      <div class="progress-text">完善度：50%</div>
    </div> -->
    <div class="base-info">
      <!-- <mt-cell class="cell" title="更换头像" to="#" is-link>
        <img slot="icon" src="static/img/server/U3722P772DT20111227125629.jpg" width="24" height="24" />
      </mt-cell>-->
      <mt-cell class="cell" title="昵称" :value="user.nickName"></mt-cell>
      <mt-cell class="cell" title="真实姓名"  :value="user.realName"></mt-cell>
      <mt-cell class="cell" title="出生日期"  >{{user.birth}}</mt-cell>
      <mt-cell class="cell" title="性别"  :value="genderText"></mt-cell>
      <mt-cell class="cell" title="手机号"  :value="user.phone"></mt-cell>
      <mt-cell class="cell" title="邮箱"  :value="user.mail"></mt-cell>
      <mt-cell class="cell" title="所在城市"  :value="user.cityName"></mt-cell>
      <mt-cell class="cell" title="职业"  :value="user.job"></mt-cell>
      <mt-cell class="cell" title="爱好"  :value="user.hobby"></mt-cell>
    </div>
  </div>
</template>

<script>
import { fetchGetData } from "@/api/fetch.js";
import { formatDate,getDictionaryKey } from "@/libs/util.js";

export default {
  name: "personalData",
  data() {
    return {
      id:this.$route.params.id,
      user: {},
      genderText:"",
    };
  },
  props: [],
  mounted() {
    fetchGetData("/api/user/detail", { id: this.id }).then(data => {
      if (data.status == 1) {
        this.user = data.data;
        this.genderText = getDictionaryKey('key1000', this.user.gender);
        console.log(this.user);
      } else {
        console.log("fail");
      }
    });
  },
  filters: {
    
  }
};
</script>

<style lang="stylus" scoped>
.personal-data {
  // .mint-header>>>.mint-header-title {
  // font-size: 0.4rem;
  // }
  background-color #efefef;
  height: 100%;
  padding-top 40px;
  box-sizing border-box;

  .progress {
    position: relative;
    // background-color: pink;
    height: 1rem;
    padding: 0 0.3rem;
    border-bottom: 1px solid #eee;

    .progress-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .base-info {
    padding: 0.3rem;
    background-color #fff;
    .cell {
    }
  }
}

.progress>>>.mt-progress {
  top: 50%;
  transform: translateY(-50%);

  .mt-progress-runway {
    border-radius: 10px;
  }

  .mt-progress-progress {
    border-radius: 10px 0 0 10px;
  }
}
</style>